import React, { useEffect, useState } from 'react';
import { Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import http from '../../api/http';
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd';
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}
type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
};
function Index() {
    const [data, setData] = useState([])
    const [total, setTotal] = useState(0)
    const [page, setPage] = useState(1)
    const [pageSize, setPageSize] = useState(10)
    const [title, setTitle] = useState('')
    const getlist = async () => {
        const params: {
            page: number,//页码
            pageSize: number,//每页显示条数
            keyword?: string,//搜索标题
        } = {
            page, pageSize
        }
        if (title) params.keyword = title
        const res = await http.get('/article/list', { params })
        setData(res.data.rows)
        setTotal(res.data.count)
    }
    useEffect(() => {
        getlist()
    }, [page, pageSize, title])
    const columns: TableProps<DataType>['columns'] = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            render: (text) => <a>{text}</a>,
        },
        {
            title: 'title',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: 'content',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: 'createdAt',
            dataIndex: 'createdAt',
            key: 'createdAt',
        },
        {
            title: 'updatedAt',
            dataIndex: 'updatedAt',
            key: 'updatedAt',
        },
        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a>Invite {record.name}</a>
                    <a>Delete</a>
                </Space>
            ),
        },
    ];
    //分页
    const fenye = (page: number, pageSize: number) => {
        setPage(page)
        setPageSize(pageSize)
    }
    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        setTitle(values.title)
    };

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div>
            <Form
                layout='inline'
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item<FieldType>
                    label="title"
                    name="title"
                >
                    <Input />
                </Form.Item>

                <Form.Item label={null}>
                    <Button type="primary" htmlType="submit">
                        搜索
                    </Button>
                </Form.Item>
            </Form>
            <Table<DataType> columns={columns} dataSource={data} pagination={{
                total: total,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `Total ${total} items`,
                onChange: fenye
            }} />
        </div>
    )
}

export default Index
